<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="600px">
		<template #header>
			<div style="color: #fff">{{_d.record ? '编辑' : '添加'}}类别</div>
		</template>
	  <el-form class="form-box" :model="_d.form" ref="formRef" label-width="auto">
			<el-form-item label="类别名称" prop="projectName" :rules="[{ required: true, message: '类别名称不能为空', trigger: 'blur' }]">
				<el-input v-model="_d.form.projectName" placeholder="请输入类别名称" clearable />
			</el-form-item>
			<el-form-item label="金额范围" prop="amount">
				<div class="flex items-center">
					<el-input-number style="width:150px;" v-model="_d.form.miniAmount" placeholder="请输入" clearable />
					<span class="px-10">至</span>
					<el-input-number style="width:150px;" v-model="_d.form.maxAmount" placeholder="请输入" clearable />
					<b class="px-10">元</b>
				</div>
			</el-form-item>
			<el-form-item label="描述" prop="description">
				<el-input v-model="_d.form.description" type="textarea" :rows="5" placeholder="请输入描述" clearable />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
				<el-button :loading="_d.btnLoading" type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {$get, $post} from '/@/utils/request';

const emits = defineEmits(['reload']);
const formRef = ref();

const _d = reactive({
	visible: false,
	record: null,

	btnLoading: false,
	form: {
		projectName: '',
		miniAmount: null,
		maxAmount: null,
		description: '',
	},
});

onMounted(async () => {
	
});

// 打开弹窗
const open = (record) => {
	_d.record = record || null;
	_d.form.projectName = record ? record.projectName : '';
	_d.form.miniAmount = record ? record.miniAmount : null;
	_d.form.maxAmount = record ? record.maxAmount : null;
	_d.form.description = record ? record.description : '';
	_d.visible = true;
};

// 取消
const cancel = () => {
	_d.visible = false;
};

// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		if(!_d.record) {
			addSave();
		} else {
			editSave();
		}
	})
}

const addSave = () => {
	let params = {
		projectName: _d.form.projectName,
		miniAmount: _d.form.miniAmount || '',
		maxAmount: _d.form.maxAmount || '',
		description: _d.form.description,
	}
	_d.btnLoading = true;
	$post('/projectTemplateModule/addprojecttemplate', params).then(res => {
		if(res.code == 200) {
			ElNotification({
		    title: '提示',
		    message: '添加成功',
		    type: 'success',
		  })
			emits('reload');
			_d.visible = false;
		}
	}).finally(() => {
		_d.btnLoading = false;
	})
}

const editSave = () => {
	let params = {
		id: _d.record.id,
		projectName: _d.form.projectName,
		miniAmount: _d.form.miniAmount || '',
		maxAmount: _d.form.maxAmount || '',
		description: _d.form.description,
	}
	$post('/projectTemplateModule/modifyprojecttemplate', params).then(res => {
		ElNotification({
	    title: '提示',
	    message: '编辑成功',
	    type: 'success',
	  })
	  emits('reload');
	}).finally(() => {
		_d.visible = false;
	})
}

// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 150px;
}
</style>
